<template>
  <div>
    <el-dialog title="工单动态" :visible.sync="show" width="600px" append-to-body @close="cancel">
      <div>
        <el-timeline>
          <el-timeline-item v-for="(i, k) in dataList" :key="k"
            :type="[3, 8, 9, 11, 12].includes(i.type) ? 'danger' : 'success'" :timestamp="i.createTime" placement="top">
            <el-card>
              <div class="step-header">
                <el-avatar :src="baseURL + i.createUserAvatar" />
                <span>{{ i.operationUserNickName }}</span>
                <el-tag size="mini">{{ i.operationUserType | enumUserType }}</el-tag>
              </div>
              <div style="margin: 10px 0">
                <el-tag :type="[3, 8, 9, 11, 12].includes(i.type) ? 'danger' : 'success'" size="mini">{{
      getByStatus(i.type)
    }}</el-tag>
              </div>
              <div>
                {{ i.createTime }}
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderStepRecord } from "@/api/system/order";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => { },
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      dataList: [], // 操作记录列表
      statusList: [
        // 状态列表
        { label: "待负责人审批", value: 1 },
        { label: "待业主审批", value: 2 },
        { label: "被退回", value: 3 },
        { label: "重新发起", value: 4 },
        { label: "维修接单", value: 5 },
        { label: "维修结束", value: 6 },
        { label: "已完结", value: 7 },
        { label: "复验不通过", value: 8 },
        { label: "撤销工单", value: 9 },
        { label: "任务发布", value: 10 },
        // { label: "业主退回", value: 11 },
        // { label: "业主转回机构处理", value: 12 },
        // { label: "待二次复验", value: 13 },
        // { label: "二次复验不通过", value: 14 },
      ],
    };
  },
  watch: {
    show(v) {
      if (v) this.getList();
    },
  },
  methods: {
    // 查询操作记录列表
    getList() {
      getOrderStepRecord({ workOrderId: this.row.id }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data;
        }
      });
    },
    // 状态名称
    getByStatus(status) {
      let row = this.statusList.find((item) => item.value === status);
      return row ? row.label : "";
    },
    // 关闭弹窗
    cancel() {
      this.show = false;
      this.dataList = [];
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
.step-header {
  display: flex;
  align-items: center;

  span {
    margin-right: 10px;
  }
}
</style>
